<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>RGB</title>
<script>
		function load()
		{
			var httpRequest = new XMLHttpRequest();
			httpRequest.open('GET', '/getState', true);
			httpRequest.send();
			
			httpRequest.onreadystatechange = function () {
				if (httpRequest.readyState == 4 && httpRequest.status == 200) {
					var data = httpRequest.responseText;//获取到json字符串，还需解析
					var json = eval('('+data+')');
					//alert(json);
					console.log(json);
					document.getElementById("color").value = json.Color;
					document.getElementById("color_selected").value = json.Color;
					
					document.getElementById("mode").value = json.Effects;
					document.getElementById("mode_selected").value = json.Effects;
					
					document.getElementById("brightness").value = json.maxBrightness;
					document.getElementById("brightness_selected").value = json.maxBrightness;
					
					document.getElementById("sensitivity").value = json.TriggerLevel;
					document.getElementById("sense_selected").value = json.TriggerLevel;
				}
			};
		}
		
		function changeRGB(){
			//alert(document.getElementById("color").value);
			var color = document.getElementById("color").value;
			document.getElementById("color_selected").value = color;
			
			var httpRequest = new XMLHttpRequest();
			httpRequest.open('GET', '/changeColor?color='+color, true);
			httpRequest.send();
			
			httpRequest.onreadystatechange = function () {
				if (httpRequest.readyState == 4 && httpRequest.status == 200) {
					var json = httpRequest.responseText;//获取到json字符串，还需解析
					console.log(json);
				}
			};
		}
		
		function changeMode(){
			var mode = document.getElementById("mode").value;
			document.getElementById("mode_selected").value = mode;
			var httpRequest = new XMLHttpRequest();
			httpRequest.open('GET', '/changeMode?mode='+mode, true);
			httpRequest.send();
			
			httpRequest.onreadystatechange = function () {
				if (httpRequest.readyState == 4 && httpRequest.status == 200) {
					var json = httpRequest.responseText;//获取到json字符串，还需解析
					console.log(json);
				}
			};
		}
		
		function changeBrightness(){
			var brightness = document.getElementById("brightness").value;
			document.getElementById("brightness_selected").value = brightness;
			var httpRequest = new XMLHttpRequest();
			httpRequest.open('GET', '/changeBrightness?brightness='+brightness, true);
			httpRequest.send();
			
			httpRequest.onreadystatechange = function () {
				if (httpRequest.readyState == 4 && httpRequest.status == 200) {
					var json = httpRequest.responseText;//获取到json字符串，还需解析
					console.log(json);
				}
			};
		}
		
		function changeSenseLevel(){
			var level = document.getElementById("sensitivity").value;
			document.getElementById("sense_selected").value = level;
			var httpRequest = new XMLHttpRequest();
			httpRequest.open('GET', '/changeTriggerLevel?level='+level, true);
			httpRequest.send();
			
			httpRequest.onreadystatechange = function () {
				if (httpRequest.readyState == 4 && httpRequest.status == 200) {
					var json = httpRequest.responseText;//获取到json字符串，还需解析
					console.log(json);
				}
			};
		}		
</script>
</head>

<body onload="load()">
	<p> 灯效<p>
	0<input id="mode"style="width: 300px;height:60px;" type="range" value="1" min="0" max="18" step="1" onchange="changeMode()">18
	
	<input id="mode_selected" type="text" value="1" >
	<p>色彩<p>
	0<input id="color" style="width: 300px;height:60px;" type="range" value="100" min="0" max="255" step="1" onchange="changeRGB()">255
	<input id="color_selected" type="text" value="100" >
	<p>
	
	<p>
	<p>亮度<p>
	0<input id="brightness"style="width: 300px;height:60px;" type="range" value="100" min="0" max="255" step="5" onchange="changeBrightness()">255
	<input id="brightness_selected" type="text" value="100" >
	<p>
	<p>灵敏度<p>
	100<input id="sensitivity"style="width: 300px;height:60px;" type="range" value="100" min="0" max="1024" step="10" onchange="changeSenseLevel()">1024
	<input id="sense_selected" type="text" value="100" >
</body>
</html>
